import Vue from 'vue'
import App from './App.vue'
import router from './router' // vue-router
import store from './store' // vuex
import 'amfe-flexible' // flexible.js
import directives from './utils/directives'
import { NavBar, Form, Field, Button, Tabbar, TabbarItem, Icon, Tab, Tabs, Cell, List, PullRefresh, ActionSheet, Popup, Row, Col, Badge, Search, Divider, Tag, CellGroup, Image, Dialog, DatetimePicker } from 'vant'

Vue.use(DatetimePicker)
Vue.use(Dialog)
Vue.use(Image)
Vue.use(Tag)
Vue.use(CellGroup)
Vue.use(Divider)
Vue.use(Search)
Vue.use(Row)
Vue.use(Col)
Vue.use(Badge)
Vue.use(Popup)
Vue.use(ActionSheet)
Vue.use(PullRefresh)
Vue.use(List)
Vue.use(Cell)
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(Icon)
Vue.use(Tabbar)
Vue.use(TabbarItem)
Vue.use(Button)
Vue.use(Form)
Vue.use(Field)
Vue.use(NavBar)

Vue.use(directives) // 全局自定义指令
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

// 写任何需求:
// 章法
// 1. html+css(标签和样式搞定)
// 2. 铺设数据(调整内容)
// 3. JS(交互/校验....效果)
// 4. 与后台交互

// 技巧:
// 前端变量名可以直接跟后端 要求的参数名一致
// 技巧2:
// 统一判断http状态码, axios的"响应"拦截器
// axios的"请求"拦截器, 统一给请求配置对象中加入统一的东西
// 例如: 所有的请求都带上请求头字段Authorization和token值

// 技巧3:
// 所有状态一起变的, 一个变量控制所有人
// 每行状态"独立"改变的, 每行对应"对象"里的属性(obj.visible/其他属性), 显示隐藏的状态(2种值切换)

// 技巧4:
// 路由到底是几级的
// 不要光看路径的个数
// 实际:
// 在路由规则数组里的层级
